<!-- 购物车 -->
<template>
  <div class="cart-view">
    <!-- 空购物车 -->
    <div class="empty-cart" v-if="!showCart">
      <img src="https://x.dscmall.cn/static/dist/img/cart-empty.png" alt="" />
      <p>您的购物车还是空空的，快去逛逛吧！</p>
      <button>去逛逛</button>
      <button>去关注</button>
    </div>
    <!-- 购物车有数据 -->
    <div class="cart-list" v-else>
      <div class="address">
        <i class="iconfont icon-dingwei"></i>
        <span>河南省 郑州市 中原区</span>
      </div>
      <div class="cart-content">
        <ul class="cart-shop">
          <li v-for="(cartListData, storeIndex) in cartListDatas" :key="cartListData.store_id">
            <div class="shop-name">
              <!-- 店铺信息 -->
              <div class="shop-select" @click="shopSelectFun(cartListData, storeIndex)">
                <!-- 选中 -->
                <i class="iconfont icon-yuanxingxuanzhongfill" v-if="cartListData.checked"></i>
                <!-- 未选中 -->
                <i class="iconfont icon-yuanxingweixuanzhong" v-else></i>
                <h3>{{ cartListData.store_name }}</h3>
              </div>
            </div>
            <!-- 商品信息 -->
            <div class="cart-goods-list">
              <ul>
                <li v-for="(cartGoodsItem, goodsIndex) in cartListData.goods" :key="goodsIndex">
                  <div class="goods-select" @click="goodsSelectFun(cartGoodsItem, storeIndex, goodsIndex)">
                    <!-- 选中 -->
                    <i class="iconfont icon-yuanxingxuanzhongfill" v-if="cartGoodsItem.is_checked"></i>
                    <!-- 未选中 -->
                    <i class="iconfont icon-yuanxingweixuanzhong" v-else></i>
                  </div>
                  <div class="goods-content">
                    <img :src="cartGoodsItem.goods_thumb" alt="" />
                    <div class="goods-info">
                      <div class="goods-title">
                        {{ cartGoodsItem.goods_name }}
                      </div>
                      <div class="goods-wrap">
                        <div class="goods-price">
                          <div class="currency-price">
                            <span>
                              <em>¥</em>
                              <!-- 整数 -->
                              <span>{{
                                  cartGoodsItem.goods_price | setInt
                              }}</span>
                              <!-- 小数 -->
                              <em>{{
                                  cartGoodsItem.goods_price | setFloat
                              }}</em>
                            </span>
                          </div>
                        </div>
                        <div class="oper">
                          <van-stepper v-model="cartGoodsItem.goods_number" integer
                            @minus="minusGoodsNum(cartGoodsItem, storeIndex, goodsIndex)"
                            @plus="plusGoodsNum(cartGoodsItem, storeIndex, goodsIndex)" />
                          <i class=" iconfont icon-shoucang1"></i>
                          <i class="iconfont icon-shanchu"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
      <div class="cart-footer">
        <!-- 选择 -->
        <div class="select">
          <div class="select-all" @click="selectAllFun">
            <!-- 选中 -->
            <i class="iconfont icon-yuanxingxuanzhongfill" v-if="selectAll"></i>
            <!-- 未选中 -->
            <i class="iconfont icon-yuanxingweixuanzhong" v-else></i>
          </div>
          <span>全选</span>
        </div>
        <!-- 合计内容 -->
        <div class="total">
          <span>合计:</span>
          <span class="total-price">{{ 0 }}</span>
          <p>已节省多少钱</p>
        </div>
        <mt-button type="danger" size="small">去结算({{ 0 }})</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      // cartListDatas: [
      //   {
      //     store_id: 0,
      //     store_name: "商城自营",
      //     checked: true,
      //     goods: [
      //       {
      //         store_id: 0,
      //         store_name: "商城自营",
      //         goods_id: "1001",
      //         goods_name:
      //           "小米8SE全面屏拍照游戏智能手机学生机商务机8周年 官方旗舰店正品现货速发",
      //         goods_price: "588.00",
      //         goods_thumb:
      //           "https://x.dscmall.cn/storage/images/201809/goods_img/977_P_1536607533629.jpg",
      //         // 购买量
      //         goods_number: 1,
      //         is_checked: true,
      //       },
      //       {
      //         store_id: 1,
      //         goods_id: "1002",
      //         goods_name:
      //           "小米8SE全面屏拍照游戏智能手机学生机商务机8周年 官方旗舰店正品现货速发",
      //         goods_price: "2333.00",
      //         goods_thumb:
      //           "https://x.dscmall.cn/storage/images/201809/goods_img/977_P_1536607533629.jpg",
      //         goods_number: 1,
      //         is_checked: true,
      //       },
      //     ],
      //   },
      //   {
      //     store_id: 1,
      //     store_name: "小米店铺",
      //     checked: false,
      //     goods: [
      //       {
      //         store_id: 2,
      //         store_name: "小米店铺",
      //         goods_id: "2001",
      //         goods_name:
      //           "小米8SE全面屏拍照游戏智能手机学生机商务机8周年 官方旗舰店正品现货速发",
      //         goods_price: "2333.00",
      //         goods_thumb:
      //           "https://x.dscmall.cn/storage/images/201809/goods_img/977_P_1536607533629.jpg",
      //         goods_number: 1,
      //         is_checked: false,

      //       },
      //     ],
      //   },
      // ],
    };
  },
  //计算属性 类似于data概念
  computed: {
    showCart() {
      if (this.cartListDatas.length > 0) {
        return true;
      } else {
        return false;
      }
    },
    // 计算属性
    cartListDatas() {
      return this.$store.state.cartListDatas;
    },
    // 全选
    selectAll() {
      return this.$store.state.selectAll
    }
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 商品数量进行减少
    minusGoodsNum(cartGoodsItem, storeIndex, goodsIndex) {
      if (cartGoodsItem.goods_number > 1) {
        cartGoodsItem.goods_number--;
      } else {
        cartGoodsItem.goods_number = 1
      }
      let data = {
        cartGoodsItem,
        storeIndex,
        goodsIndex
      }
      // 提交mutations
      this.$store.commit('minusGoodsNumMu', data);
    },
    plusGoodsNum(cartGoodsItem, storeIndex, goodsIndex) {
      cartGoodsItem.goods_number++;
      let data = {
        cartGoodsItem,
        storeIndex,
        goodsIndex
      }
      // 提交mutations
      this.$store.commit('plusGoodsNumMu', data);
    },
    // 商品选择的更新
    goodsSelectFun(cartGoodsItem, storeIndex, goodsIndex) {
      cartGoodsItem.is_checked = !cartGoodsItem.is_checked;
      let data = {
        cartGoodsItem,
        storeIndex,
        goodsIndex
      };
      // 提交商品选择内容变化
      this.$store.commit('goodsSelect', data);
    },
    // 店铺选择的更新
    shopSelectFun(cartListData, storeIndex) {
      cartListData.checked = !cartListData.checked;
      let data = {
        cartListData,
        storeIndex
      }
      // 提交mutations
      this.$store.commit('shopSelect', data)
    },
    selectAllFun() {
      this.$store.commit('selectAll');
    }

  },
  beforeCreate() { }, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() { },
  beforeMount() { }, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    console.log(this.$store);
  },
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroyed() { }, //生命周期 - 销毁完成
  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less">
.cart-view {
  overflow: auto;
  padding-bottom: 10rem;

  .empty-cart {
    margin: 1rem;
    background-color: #fff;
    border-radius: 0.5rem;
    text-align: center;
  }

  // 商品相关信息
  .cart-list {

    // 共同样式
    i {
      font-size: 1.6rem;
    }

    .icon-yuanxingxuanzhongfill {
      color: red;
    }

    .icon-yuanxingweixuanzhong {
      color: #ccc;
    }

    // 地址
    .address {
      height: 5rem;
      line-height: 5rem;
      padding-left: 1rem;
      font-size: 1.4rem;
      color: #777;
    }

    .cart-content {
      .cart-shop {
        >li {
          width: calc(100% - 4rem);
          margin: 1rem;
          background-color: #fff;
          border-radius: 1rem;
          padding: 1rem;

          .shop-name {
            width: calc(100% - 2rem);
            height: 4rem;

            .shop-select {
              display: flex;
              align-items: center;
              font-size: 1.3rem;

              h3 {
                margin-left: 1rem;
              }
            }
          }

          .cart-goods-list {
            li {
              height: 8rem;
              display: flex;
              align-items: center;

              .goods-select {
                margin-right: 0.5rem;
              }

              .goods-content {
                display: flex;

                img {
                  width: 7rem;
                  height: 7rem;
                }

                .goods-info {
                  margin-left: 1rem;

                  .goods-title {
                    width: 23rem;
                    font-size: 1.4rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }

                  .goods-wrap {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .goods-price {

                      // 价格样式
                      .currency-price {
                        margin-top: 0.5rem;
                        font-weight: 700;
                        color: rgb(242, 14, 40);
                        font-size: 1.5rem;

                        em {
                          font-size: 1.05rem;
                        }
                      }
                    }

                    .oper {
                      display: flex;
                      justify-content: space-between;
                      align-items: center;
                      padding: 1rem;

                      i {
                        margin-left: 1rem;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    .cart-footer {
      display: flex;
      width: calc(100% - 2rem);
      background-color: #fff;
      padding: 0 1rem;
      height: 4.4rem;
      position: fixed;
      left: 0;
      bottom: 5rem;
      justify-content: space-between;
      align-items: center;
      font-size: 1.4rem;

      .select {
        display: flex;
      }

      .total {
        margin-left: 8rem;

        .total-price {
          font-size: 1.8rem;
          font-weight: 700;
          color: red;
          margin-left: 0.5rem;
        }
      }
    }
  }
}
</style>